<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Life Cycle</title>
    <script src="../Vue.js" type="text/javascript"></script>
</head>
<body>

    <div id="app">
        <h1>{{username}}</h1>
        <h1 :class="onred" id="h1er">函数渲染</h1>
    </div>

    <script>
        let app = new Vue({
            el: "#app",
            data:{
            	username:'张三',
                onred:"temwork"
            },
            methods:{
                teamwork:function () {
                }
            },
	        beforeCreate: function () {
		        console.log('当前输出beforeCreate的函数和数据内容')
		        console.log(this.username)
		        console.log(this.teamwork)
                console.log('boforeCreate时,此时函数和data都不存在,且函数未绑定')
	        },
	        created:function () {
		        console.log('当前输出beforeCreate的函数和数据内容')
		        console.log(this.username)
		        console.log(this.teamwork)
		        console.log(document.getElementsByClassName('onred'))
		        console.log('Create时,此时函数和data都存在,但函数未绑定')
	        },
	        beforeMount:function () {
		        console.log('当前输出beforeCreate的函数和数据内容')
		        console.log(this.username)
		        console.log(this.teamwork)
		        console.log(document.getElementsByClassName('onred'))
		        console.log('Create时,此时函数和data都存在,但函数未绑定')
	        },
            mounted:function () {
	            console.log('当前输出beforeCreate的函数和数据内容')
	            console.log(this.username)
	            console.log(this.teamwork)
	            console.log(document.getElementsByClassName('onred'))
	            console.log('Create时,此时函数和data都存在,且函数已绑定')
            },
            beforeUpdate:function () {
            	console.log('数据保持原样')
            },
            updated:function () {
                console.log('数据已更新')
            },
            beforeDestroy:function () {
	            console.log('当前输出beforeCreate的函数和数据内容')
	            console.log(this.username)
	            console.log(this.teamwork)
	            console.log(document.getElementsByClassName('onred'))
	            console.log('Create时,此时函数和data都存在,且函数已绑定')
            },
            destroy:function () {
	            console.log('当前输出beforeCreate的函数和数据内容')
	            console.log(this.username)
	            console.log(this.teamwork)
	            console.log(document.getElementsByClassName('onred'))
	            console.log('Create时,此时函数和data都不存在,且函数失效')
            }
        })
    </script>
</body>
</html>